<template>
  <div class="result" ref="homePage">
    <div class="result_box">
       <van-icon name="checked" />
       <span>订单支付成功</span>
       <span>您可以在我的订单中查询订单详情</span>
       <img v-show="datalist.QRCodeType != 0" :src="datalist.QRCodeImg"/>
       <span v-show="datalist.QRCodeType != 0">券码: {{datalist.QRCodeStr}}</span>
       <span v-show="datalist.QRCodeType != 0">向景区出示以上券码即可消费</span>
    </div>
    <div class="result_bottm">
      <div @click="orderlist">查看订单</div>
      <div @click="kong">返回首页</div>
    </div>
  </div>
</template>

<script>
import {
    OrderDetails,
  } from '@/api/home.js'
  export default {

    data() {
      return {
        clintHeigth: '', //获取页面高度
        datalist:[],
      }
    },

    mounted() {
      this.OrderDetails()
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      kong() { //跳转订单结果
        this.$router.push({
          path: "/",
        })
      },
      orderlist() { //跳转订单结果
        this.$router.push({
          path: "/User/UserOrderdetails",
          query: {
            ordSN: this.$route.query.sns,
          }
        })
      },
      OrderDetails(){
        let data = {
          ordSN:this.$route.query.sns
        }
        OrderDetails(data).then(res=>{
          console.log(res)
          this.datalist = res.Item
        })
      }
    }
  }
</script>

<style lang="scss">
  .result {
    .result_box{
      width: 100%;
      height: 400px;
      background: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .van-icon{
        font-size: 60px !important;
      }
      :nth-child(2){
          font-size: 18px;
          font-weight: 600;
          margin-top: 10px;
      }
      :nth-child(3){
          font-size: 14px;
          font-weight: 400;
          color: #aaaaaa;
          margin-top: 10px;
      }
      :nth-child(4){
          width: 120px;
          height: 120px;
          margin-top: 20px;
      }
      :nth-child(5){
          font-size: 13px;
          font-weight: 400;
          color: #A0A0A0;
          margin-top: 4px;
      }
      :nth-child(6){
          font-size: 15px;
          font-weight: 400;
          color: #aaaaaa;
          margin-top: 10px;
      }
    }
    .result_bottm{
      width: 100%;
      :nth-child(1){
        width: 90%;
        height: 45px;
        text-align: center;
        line-height: 45px;
        margin: 20px auto;
        background: #46d0ca;
        color: white;
        font-size: 16px;
        border-radius: 5px;
      }
      :nth-child(2){
        width: 90%;
        height: 45px;
        text-align: center;
        line-height: 45px;
        margin: 20px auto;
        border:1px solid #46d0ca;
        color: #46d0ca;
        font-size: 16px;
        border-radius: 5px;
      }
    }
  }
</style>
